<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
      :is_right="true"
    ></gltitle>
    <!-- :titleRight="titleRight"
    @preserve="path_url('/wallet/index?id=2&name=' + $t('page.doc17'))" -->
    <div class="assets">
      <div class="n">{{ $t("page.doc18") }}(USDT)</div>
      <div class="am">{{ common.decal2(configInfo.balance || 0) }}</div>
    </div>
    <div class="container">
      <div class="itemBox data_list">
        <!--        <div class="name name_noe">{{ $t('page1.doc50') }}</div>-->
        <!--        <ul class="tab flex">-->
        <!--          <li v-for="(item,k) in tabData" :key="k"-->
        <!--              @click="onTab(item,k)"-->
        <!--              :class="{on:item.chainName == chainName}">-->
        <!--            {{ item.tokenType }}-->
        <!--          </li>-->
        <!--        </ul>-->
        <div class="list">
          <ul>
            <li>
              <div class="name">{{ $t("new.doc43") }}</div>
              <div class="set db" @click="Chain_show = true">
                <div class="n flexs zffs">
                  <img
                    v-if="bi_name === 'USDT'"
                    src="@/assets/images/ico_bi1.png"
                    alt=""
                  />
                  <img
                    v-if="bi_name === 'USDC'"
                    src="@/assets/images/usdc.png"
                    alt=""
                  />
                  <input type="text" v-model="bi_name" readonly />
                </div>
                <div class="str">
                  <van-icon name="arrow-down" color="#8BFFC2" />
                </div>
              </div>
            </li>

            <li>
              <div class="name">{{ $t("page1.doc50") }}</div>
              <div class="set db" @click="Chain_show = true">
                <div class="n flexs">
                  <input type="text" v-model="tokenType" readonly />
                </div>
                <div class="str">
                  <van-icon color="#8BFFC2" name="arrow-down" />
                </div>
              </div>
            </li>

            <li>
              <div class="name">{{ $t("page.doc19") }}</div>
              <div
                class="set db"
                @click="
                  path_url(
                    `/wallet/addressList?coinId=${coinId}&chainName=${chainName}`
                  )
                "
              >
                <div class="n flexs" style="display: flex; align-items: center">
                  <input
                    type="text"
                    :placeholder="$t('page1.doc55')"
                    v-model="address"
                    :readonly="!!configInfo.address"
                  />
                  <!-- <img @click="path_url('/wallet/addressList')" style="height: .36rem" src="../../assets/images/address.png" alt=""> -->
                  <img
                    style="height: 0.36rem"
                    src="../../assets/images/address.png"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div class="name">{{ $t("page.doc21") }}</div>
              <div class="set db">
                <div class="n flexs">
                  <input
                    type="text"
                    :placeholder="$t('page.doc22')"
                    v-model="amount"
                    @input="oninput"
                  />
                </div>
                <div class="str" @click="getAll">{{ $t("page.doc11") }}</div>
              </div>
            </li>
            <li style="padding: 0">
              <div class="p1">
                <img src="../../assets/images/Group30.png" alt="" />
                {{ $t("page1.doc56") }}:
                <span class="tip"
                  >{{ configInfo.min }} USDT-{{ configInfo.max }} USDT</span
                >
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="p" style="margin-top: 20px; padding: 0 20px">
        <div class="mflex justify-between items-center">
          <div>{{ $t("page.doc24") }}：</div>
          <div class="text-yellow">{{ fee }} USDT</div>
        </div>
        <div class="mflex justify-between items-center">
          <div>{{ $t("page4.doc113") }}：</div>
          <div>{{ common.decal4(taxation) }} USDT</div>
        </div>
        <div class="mflex justify-between items-center">
          <div>{{ $t("page.doc25") }}：</div>
          <div>{{ common.decal4(am) }} USDT</div>
        </div>
      </div>

      <div class="go">
        <button class="btn" @click="getGo()">{{ $t("page.doc27") }}</button>
      </div>
      <div class="tip-box" v-if="tipsInfo.description">
        <div class="p_name">{{ tipsInfo.title }}:</div>
        <div class="p" v-html="tipsInfo.description"></div>
      </div>
    </div>
    <van-popup
      v-model="Chain_show"
      round
      closeable
      :position="is_position"
      style="background: none"
    >
      <div class="popCoin">
        <div class="name">{{ $t("new.doc44") }}</div>
        <ul class="tab flex">
          <li
            v-for="(item, k) in coInData"
            :key="k"
            :class="{ on: item.coinId == actCoinId }"
            @click="onSet(item)"
          >
            <img :src="item.coinIcon" alt="" />
            {{ item.coinName }}
          </li>
        </ul>
        <ul class="line">
          <li
            v-for="(item, k) in actChainList"
            :key="k"
            class="flex"
            :class="{ on: item.chainName == chainName }"
            @click="onTab(item)"
          >
            <div class="ico"><img :src="item.chainIcon" alt="" /></div>
            <div class="flex1">
              <div class="title">{{ item.chainDesc }}</div>
              <div class="str">
                <p>
                  {{ $t("page.doc23") }}≥{{ item.withdrawMinNum || 0 }}
                  {{ actbi_name }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </van-popup>

    <van-popup v-model="bi_show" round position="bottom">
      <van-picker
        :title="$t('page.doc9')"
        show-toolbar
        :columns="biData"
        @confirm="onConfirm"
        @cancel="onCancel"
        item-height=".8rem"
        :confirm-button-text="$t('page.doc83')"
        :cancel-button-text="$t('page4.doc63')"
      />
    </van-popup>

    <van-popup
      v-model="password_show"
      round
      :position="is_position"
      style="background: none"
    >
      <div class="password_pop">
        <div class="pass">
          <div class="title rel tac">
            {{ $t("page.doc28") }}
            <div class="abs" @click="password_show = false">
              <van-icon name="cross" />
            </div>
          </div>
          <div class="box rel" :class="{ on: isPc }">
            <input
              type="text"
              v-model="password"
              maxlength="6"
              class="abs"
              ref="getFocus"
            />
            <van-password-input
              :gutter="20"
              :value="password"
              :length="6"
              :focused="showKeyboard"
              @focus="showKeyboard = true"
            />
          </div>
          <button @click="getBtn" :disabled="isDisable">
            {{ $t("page.doc29") }}
          </button>
        </div>
        <div class="jianpan" v-if="!isPc">
          <p>{{ $t("page.doc30") }}</p>
          <van-number-keyboard
            v-model="password"
            :show="showKeyboard"
            @blur="showKeyboard = true"
          />
        </div>
      </div>
    </van-popup>
    <TaxTipsPop v-model="showTaxTipsPop" />
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from "vuex";
import { Dialog } from "vant";
import TaxTipsPop from "@/views/wallet/components/TaxTipsPop.vue";

export default {
  components: { TaxTipsPop },
  data() {
    return {
      title: this.$t("title.doc29"),
      // titleRight: "<img src=" + require("../../assets/images/ico1.png") + ">",

      bi_name: "",
      bi_show: false,
      Chain_show: false,
      address: "",
      coinId: "",
      chainName: "",
      tokenType: "",
      biData: [],
      tabData: [],
      coInData: [],

      userData: this.$store.state.userData,
      amount: "",
      configInfo: [],
      taxationConfig: null,
      fee: 0,
      am: 0,
      password: "",
      showKeyboard: true,
      password_show: false,
      isDisable: false,
      areaId: "",
      areaData: [],
      if_area: false,
      soAreaId: "",
      phone: "",
      ifgo: true,
      isBindPhone: false,
      tipsInfo: {},
      actChainList: [],
      actchainName: "",
      isPc: false,
      is_position: "bottom",
      actCoinId: "",
      actbi_name: "",
      showTaxTipsPop: false,
    };
  },

  mounted() {
    this.getTipsInfo();
    this.getBilist();
    // this.getArea(0)
    if (this.$route.query.address) {
      setTimeout(() => {
        this.address = this.$route.query.address;
      }, 0);
    }
  },
  computed: {
    searchResult() {
      if (this.soAreaId != "") {
        return this.areaData.filter(
          (item) => item.mobilePrefix.indexOf(this.soAreaId) > -1
        );
      } else {
        return this.areaData;
      }
    },
    taxation() {
      //所得税
      try {
        let { taxationConfig, amount } = this;
        if (taxationConfig) {
          const keyArr = Object.keys(taxationConfig);
          const valueArr = Object.values(taxationConfig);
          amount = Number(amount);
          let taxation = 0;
          keyArr.forEach((item, index) => {
            const arr = item.split("-");
            const min = parseInt(arr[0]);
            const max = parseInt(arr[1]);
            if (amount >= min && amount < max) {
              taxation = this.common.accMul(amount, valueArr[index]);
            }
          });
          return taxation;
        }

        return 0;
      } catch {
        return 0;
      }
    },
    taxInfo() {
      return this.$store.state.taxInfo;
    },
  },
  watch: {
    soAreaId: {
      immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
      handler(val) {
        this.code_data = this.areaData.filter((p) => {
          return p.mobilePrefix.indexOf(val) !== -1;
        });
      },
    },
  },

  methods: {
    area_set(id) {
      this.areaId = id;
      this.if_area = false;
    },
    async getTipsInfo() {
      const url = this.URL.home.article;
      const params = { categoryType: "ithdraw_rule" };
      const res = await this.$post(url, params);
      if (res.code != 0) return;
      this.tipsInfo = res.data;
    },
    getArea(id) {
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaId = res.data[0].mobilePrefix;
          this.areaData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
      if (this.configInfo.withdrawMobile != "") {
        return;
      }
      if (id == 1) {
        this.if_area = true;
      }
    },
    oninput() {
      this.amount = this.common.amountFloat(this.amount);
      if (this.amount) {
        this.amount = parseInt(this.amount);
      }
      if (this.amount !== "") {
        this.getFee();
      } else {
        this.fee = 0;
        this.am = 0;
      }
    },
    getAll() {
      if (this.configInfo.balance == 0) {
        this.amount = 0;
        return;
      }
      this.amount = this.common.decal4(this.configInfo.balance);
      this.getFee(1);
    },
    getFee(i) {
      let fee = "";
      if (this.configInfo.hasFee) {
        let a1 = this.common.accMul(this.amount, this.configInfo.coinPrice);
        let a2 = this.common.accMul(a1, this.configInfo.feeRate);
        let a3 = this.common.accDiv(a2, this.configInfo.feeCoinPrice);
        fee = a3;

        if (fee < this.configInfo.feeMin) {
          fee = this.configInfo.feeMin;
        }
      }
      // if (i == 1) {
      //   this.fee = fee;
      //   this.am = this.common.accSub(this.amount, fee);
      //   this.am = this.common.accSub(this.am, this.taxation);
      //   // this.amount = this.am
      //   return;
      // }
      this.fee = fee;
      this.am = this.common.accSub(this.amount, fee);
      this.am = this.common.accSub(this.am, this.taxation);

      // this.am = this.amount
    },
    getConfig() {
      this.$post(this.URL.user.wallet_config, {
        coinId: this.coinId,
        chainName: this.chainName,
      }).then((res) => {
        if (res.code == 0) {
          this.configInfo = res.data;
          const taxationConfig = res.data.taxationConfig;
          if (taxationConfig) {
            this.taxationConfig = JSON.parse(taxationConfig);
          }
          if (this.configInfo.address) {
            this.address = this.configInfo.address;
          }
          // this.areaId = this.configInfo.withdrawMobilePrefix == '' || this.configInfo.withdrawMobilePrefix == undefined  ? this.areaData[0].mobilePrefix : this.configInfo.withdrawMobilePrefix
          this.areaId = this.configInfo.withdrawMobilePrefix || "";
          this.phone = this.configInfo.withdrawMobile;
          this.configInfo.withdrawMobile && (this.isBindPhone = true);
        }
      });
    },

    getBilist(id) {
      this.$post(this.URL.wallet.coinList, { type: 2 }).then((res) => {
        if (res.code == 0) {
          this.coInData = res.data;
          res.data.forEach((e) => {
            this.biData.push(e.coinName);
          });
          let index = 0,
            oldIndex = this.coInData.findIndex(
              (item) => item.coinId == localStorage.getItem("coinId")
            );
          if (oldIndex != -1) {
            index = oldIndex;
          }
          this.coinId = res.data[index].coinId;
          this.bi_name = res.data[index].coinName;

          this.actCoinId = this.coinId;
          this.actbi_name = this.bi_name;

          this.actChainList = res.data[index].multiChainData;
          let two = 0,
            oldTwo = this.actChainList.findIndex(
              (item) => item.chainName == localStorage.getItem("chainName")
            );
          if (oldTwo != -1) {
            two = oldTwo;
          }
          this.chainName = res.data[index].multiChainData[two].chainName;
          this.actchainName = res.data[index].multiChainData[two].chainName;
          this.tokenType = res.data[index].multiChainData[two].tokenType;
          this.getConfig();
          //this.getBiInfo(this.coinId)
        }
      });
    },

    getBiInfo(id) {
      this.$post(this.URL.wallet.coinInfos, {
        coinId: id,
      }).then((res) => {
        if (res.code == 0) {
          this.tabData = res.data.multiChainData;
          this.chainName = res.data.multiChainData[0].chainName;
          this.tokenType = res.data.multiChainData[0].tokenType;
        }
      });
    },

    onCopy(e) {
      this.$toast(this.$t("page.doc31"));
    },
    onTab(item) {
      this.coinId = this.actCoinId;
      this.bi_name = this.actbi_name;
      this.chainName = item.chainName;
      this.tokenType = item.tokenType;
      this.actchainName = item.chainName;
      this.address = "";
      this.getConfig();
      this.amount = "";
      this.fee = 0;
      this.am = 0;
      this.Chain_show = false;
    },
    onSet(item, k) {
      // this.bi_show = false;
      this.actCoinId = item.coinId;
      this.actbi_name = item.coinName;
      this.actChainList = item.multiChainData;
      this.actchainName = item.multiChainData[0].chainName;
    },
    onConfirm(value, index) {
      this.bi_name = value;
      this.coinId = this.coInData[index].coinId;
      this.bi_show = false;
      this.getBiInfo(this.coinId);
    },
    onCancel() {
      this.bi_show = false;
    },

    getGo() {
      if (!this.ifgo) return;
      if (
        this.taxInfo &&
        this.taxInfo.hasOwnProperty("status") &&
        this.taxInfo.status != 1
      ) {
        return (this.showTaxTipsPop = true);
      }
      this.amount = this.common.amountFloat(this.amount);
      if (!this.$store.state.userData.hasSetPassword) {
        this.path_url("/my/password_trade?edit=0&code=1");
        this.$toast(this.$t("page.doc32"));
        return;
      }

      if (this.address == "") {
        this.$toast(this.$t("page.doc33"));
        return;
      }
      // if (this.phone == "") {
      //   this.$toast(this.$t("page.doc79"));
      //   return;
      // }
      // if (this.amount == "") {
      //   this.$toast(this.$t('page.doc34'));
      //   return;
      // }
      // if (this.amount){
      if (this.amount < this.configInfo.min || this.amount % 10 != 0) {
        this.$toast(this.$t("page4.doc44", { n1: this.configInfo.min }));
        return;
      }
      // }

      // if (this.areaId == "") {
      //   this.$toast(this.$t("page.doc311"));
      //   return;
      // }
      this.password_show = true;
    },
    getBtn() {
      if (this.areaId) {
        this.areaId = this.areaId.toString().replace(/\D/g, "");
      }
      if (this.phone) {
        this.phone = this.phone.toString().replace(/\D/g, "");
      }
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 1000);
      if (!this.isDisable) {
        return;
      }
      this.ifgo = false;
      this.$post(this.URL.user.wallet_btn, {
        amount: this.amount,
        password: this.$md5(this.password),
        coinId: this.coinId, //币种ID
        chainName: this.chainName, //链名称
        toAddress: this.address, //提币接收地址
        remark: "", //备注
        googleCode: "", //谷歌验证码(若用户开启谷歌验证则必须传)
        withdrawMobilePrefix: this.areaId,
        withdrawMobile: this.phone,
      }).then((res) => {
        this.ifgo = true;
        if (res.code == 0) {
          this.amount = "";
          this.password = "";
          this.fee = 0;
          this.am = 0;
          this.$toast(res.message);
        } else {
          this.$toast(res.message);
        }
        this.password_show = false;
      });
    },

    path_url(url) {
      localStorage.setItem("coinId", this.coinId);
      localStorage.setItem("chainName", this.chainName);
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}
/deep/ .container {
  padding: 0.3rem;
  padding-top: 0;
}
.home {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 0.5rem;
}

.assets {
  padding: 0 0.1rem;
  text-align: center;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  text-shadow: 0rem 0.1rem 0.2rem rgba(10, 10, 10, 0.1);
  background: url("../../assets/images/wCB.png") no-repeat center;
  background-size: 96% 100%;
  border-radius: 0.2rem;
  margin-top: 0.22rem;
  height: 2.26rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;

  .n {
    color: #fff;
  }

  .am {
    font-size: 0.72rem;
    font-weight: 600;
    color: #8bffc2;
    line-height: 0.73rem;
  }
}

.zffs {
  display: flex;
  align-items: center;

  img {
    width: 26px;
    margin-right: 8px;
  }
}

.itemBox {
  background: transparent;
  //background: var(--CObackgroundLinear2);
  border-radius: 0.12rem;
  box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 0, 0, 0.06);
  margin-bottom: 0.32rem;
  padding: 0 0.26rem;

  .name {
    font-size: 0.28rem;
    color: var(--COcolor3);
    line-height: 0.4rem;
    margin-bottom: 10px;
  }

  .tab {
    li {
      font-size: 0.32rem;
      font-family: PingFangTC-Medium, PingFangTC;
      font-weight: 500;
      color: var(--COcolor3);
      height: 0.6rem;
      line-height: 0.6rem;
      background: var(--CObackgroundLinear3);
      border-radius: 0.1rem;
      margin-right: 0.2rem;
      padding: 0 0.3rem;

      &.on {
        background: var(--CObackgroundLinear1);
        color: var(--COcolor3);
      }
    }
  }

  .mbox {
    width: 4rem;
    height: 4rem;
    background: #fff;
    margin: 0.3rem auto;
    padding: 0.1rem;

    /deep/ img {
      width: 100%;
    }
  }

  .n {
    input {
      width: 100%;
      height: 0.5rem;
      background: none;
      border: 0;
      color: var(--COcolor1);
    }
  }

  .set {
    height: 49px;
    background: #3b3941;
    border-radius: 16px;
    font-size: 0.24rem;
    padding: 0 0.26rem;

    .str {
      color: #8bffc2;
      margin-left: 0.2rem;
    }
  }

  .p1 {
    font-size: 0.2rem;
    color: #8bffc2 !important;
  }
}

.go {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;

  .btn {
    background: linear-gradient(90.25deg, #43ea80 0.21%, #38f8d4 99.79%);
    color: #0e4e35;
    border-radius: 10px;
  }
}

.data_list {
  padding: 0 !important;

  .name_noe {
    margin-bottom: 0.24rem;
  }

  .list {
    ul {
      li {
        padding: 0.35rem 0rem 0.28rem 0rem;

        .set {
          height: 65px;
          background: url("../../assets/images/singBg.png") no-repeat center;
          background-size: 100% 100%;
        }

        .p1 {
          font-size: 0.24rem;
          font-family: PingFangTC-Regular, PingFangTC;
          font-weight: 400;
          color: var(--COcolor3);
          display: flex;
          align-items: center;

          img {
            height: 0.24rem;
            margin-right: 0.12rem;
          }
        }
      }

      li:last-child {
        border-bottom: none;
      }
    }
  }
}

.tip-box {
  padding-bottom: 0.4rem;

  .p_name {
    font-size: 0.24rem;
    font-family: PingFangTC-Regular, PingFangTC;
    font-weight: 400;
    color: var(--COcolor1);
    margin-bottom: 0.16rem;
  }

  .p {
    font-size: 0.24rem;
    color: var(--COcolor1);
    line-height: 0.32rem;
    margin-top: 0 !important;
  }
}

.p {
  font-size: 0.24rem;
  font-family: PingFangTC-Regular, PingFangTC;
  font-weight: 400;
  color: var(--COcolor3);
  line-height: 0.46rem;
  margin-top: -13px !important;
}

.popCoin {
  border-radius: 0.32rem 0.32rem 0rem 0rem;
  background: linear-gradient(#0d2623 0%, #044126 50%, #004c2a 100%);
  padding: 0.32rem;
  width: 100%;

  .name {
    color: #fff;
    text-align: center;
    font-size: 0.32rem;
    font-style: normal;
    font-weight: 500;
    line-height: 0.32rem; /* 100% */
    text-transform: capitalize;
  }

  .tab {
    margin: 0.32rem 0;

    li {
      height: 0.8rem;
      display: flex;
      align-items: center;
      margin-right: 0.16rem;
      padding: 0 0.24rem;
      color: #848fa0;
      font-size: 0.32rem;
      font-weight: 600;

      img {
        margin-right: 0.08rem;
        width: 0.48rem;
        height: 0.48rem;
      }

      &.on {
        border-radius: 0.16rem;
        background: linear-gradient(340deg, #43ea80 0%, #38f8d4 100%);
        color: #000;
      }
    }
  }

  .line {
    max-height: 6.8rem;
    min-height: 6.5rem;
    overflow-y: scroll;

    li {
      border-radius: 0.24rem;
      background: #0d7f61;
      margin-bottom: 0.24rem;
      padding: 0.32rem;
      //border: 1px solid #121622;

      &.on {
        background: linear-gradient(340deg, #43ea80 0%, #38f8d4 100%);
      }

      .ico {
        margin-right: 0.24rem;

        img {
          width: 1rem;
          height: 1rem;
        }
      }

      .title {
        color: #0c2823;
        font-size: 0.28rem;
        font-weight: 500;
        line-height: 0.28rem; /* 100% */
        text-transform: uppercase;
        margin-bottom: 0.24rem;
      }

      p {
        color: #0c2823;
        font-family: "PingFang SC";
        font-size: 0.24rem;
        font-style: normal;
        font-weight: 400;
        line-height: 0.24rem; /* 100% */
        text-transform: uppercase;
        margin-bottom: 0.16rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.tip {
  color: #ffff00;
}
</style>
